<template>
	<view class="fade-body">
		<view class="text-box">
			<textarea v-model="form.content" placeholder="请详细描述您的问题" maxlength="255" class="fade-text" />
			<view class="text-num">{{form.content.length}}/255</view>
		</view>
		<view class="img-box">
			<view class="add-img add-img-show" v-for="(item,key) in form.img">
				<image :src="item" mode="scaleToFill"  class="add-img-src"></image>
				<view class="delete-img" @tap="deleteImg(key)"><i class="icon">&#xe634;</i></view>
			</view>
			<view class="add-img" @tap="upImg()">
				<i class="icon add-plus">&#xe602;</i>
			</view>
		</view>
		<view class="add-btn" @tap="submit()">
			<fade-btn>确认提交</fade-btn>
		</view>
	</view>
</template>

<script>
	import fadeBtn from '../../components/unit/button.vue';
	
	export default{
		components:{ fadeBtn },
		data(){
			return {
				form : {
					content : '',
					img : []
				}
			}
		},
		methods:{
			//提交投诉
			submit(){
				if(!this.form.content) return this.toast('请输入投诉内容');
				this.ajax('evals/addFade',{
					data:this.form,
					success:(res) =>{
						this.toast(res.msg);
						if(res.code) {
							this.form = {
								content : '',
								img : []
							};
						}
					}
				})
			},
			//上传图片
			upImg(){
				uni.chooseImage({
					sourceType: ['album' , 'camera'],
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
						    title: '加载中'
						})
							console.log(tempFilePaths[0])
						uni.getImageInfo({
							src : tempFilePaths[0],
						
							success:(res) => {
								let canvasWidth = res.width //图片原始长宽
								let canvasHeight = res.height
								let img = new Image()
								img.src = res.path
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d')
								var width = canvasWidth;
								var height = canvasHeight;
								var len = canvasHeight / canvasWidth;
								if(height > 500) {
									height = 500;
								    width = height / len;
								}
								canvas.width = width;
								canvas.height = height;
								ctx.drawImage(img, 0, 0, width, height)
								canvas.toBlob((fileSrc) => {
									let imgSrc = window.URL.createObjectURL(fileSrc)
									uni.uploadFile({
										url: '/phone/evals/upFadeImg', //仅为示例，非真实的接口地址
										filePath: imgSrc,
										name: 'file',
										formData: {
											'user': 'test'
										},
										success: (uploadFileRes) => {
											var res = JSON.parse(uploadFileRes.data);
											var url =this.$img_src+res.msg;
											if( canvasWidth > canvasHeight ) url =  url+'?x-oss-process=image/rotate,90';
											if(res.code) {
												// console.log(this.$img_src+res.msg)
												this.form.img.push(url);
											} else {
												this.toast('图片上传失败');
											}
											uni.hideLoading();
										}
									});
											})
										}
									})
				    }
				});
			},
			//删除图片
			deleteImg(key){
				this.form.img.splice(key , 1);
			}
		}
	}
</script>

<style>
	.fade-body{width: calc(100% - 60upx);padding:30upx;}
	.text-box{width: 100%;height:300upx;position: relative;clear: both;}
	.fade-text{width: 100%;height:300upx;}
	.text-num{position: absolute;right: 0;bottom: 0;font-size: 24upx;color:#999;}
	.img-box{margin-top:30upx;width: 100%;}
	.add-img{float: left;width: 150upx;height:150upx;background: #f9f9f9;text-align: center;margin-right: 20upx;position: relative;}
	.add-img-src{width: 150upx;height:150upx;}
	.add-img-show{background: transparent; width: 150upx;height:150upx;}
	.add-img .icon{font-size: 70upx;line-height: 150upx;color:#ccc}
	.delete-img{position: absolute;width: 35upx;height: 35upx;background: #DD524D;top:-15upx;right:-15upx;border-radius: 50%;color:#fff;text-align: center;line-height: 30upx;}
	.delete-img .icon{font-size: 20upx;line-height: 30upx;color:#fff;}
	.add-btn{position: fixed;bottom:100upx;width: 100%;left:0;}
</style>
